<template>


    <el-form class="Personal_div" :model="user" ref="user" label-width="160px" :rules="rules">
        <!-- 图片、用来展示用户选择的头像 -->
        <img style="width:300px;height:200px;" v-if="!this.$store.state.user.HeadPicture"
            :src="this.$store.state.user.HeadPicture" alt="" class="the_img" />
        <img style="width:300px;height:200px;" v-else :src="this.$store.state.user.HeadPicture" alt=""
            class="the_img" />
        <!-- 按钮区域 -->
        <div class="btn-box">
            <input type="file" accept="image/*" style="display:none;" ref="iptRef" @change="onFileChange">
            <el-button type="primary" icon="el-icon-plus" @click="chooseImg">选择图片</el-button>
            <!-- <el-button type="success" icon="el-icon-upload" :disabled="avatar === ''"
                @click="uploadFn">上传头像</el-button> -->
        </div>
        <el-form-item prop="password" label="密码">
            <el-input v-model="user.password" />
        </el-form-item>
        <el-form-item prop="MobilePhone" label="手机号">
            <el-input clearable v-model="user.MobilePhone" />
        </el-form-item>
        <el-form-item prop="username" label="用户名">
            <el-input type="text" clearable v-model="user.username" />
        </el-form-item>
        <el-form-item prop="sex" label="性别">
            <el-input v-model="user.sex" />
        </el-form-item>
        <el-form-item prop="Career" label="职业">
            <el-input v-model="user.Career" />
        </el-form-item>
        <el-form-item prop="Career" label="地址">
            <el-input v-model="user.address" />
        </el-form-item>

        <el-button @click="submit()">提交</el-button>
    </el-form>
</template>

<script>
// import { updateUserAvatarApi } from '@/api'// 导入更新头像的接口
export default {
    nameL: 'userAvatar',
    data() {
        return {
            user: {
                password: this.$store.state.Update.name,
                MobilePhone: this.$store.state.Update.name,
                sex: '',
                Career: '',
                address: this.$store.state.Update.address,
                username: this.$store.state.Update.name
            },
            rules: {
                password: [{ required: true, message: '请输入修改的密码', trigger: 'blur' }],
                MobilePhone: [{ required: true, message: '请输入修改的手机号', trigger: 'blur' }],
                username: [{ required: true, message: '请选择修改的用户名', trigger: 'blur' }],
                Career: [{ required: true, message: '请选择修改的职业', trigger: 'blur' }],
                sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
            },
            avatar: '', // 用来保存图片链接/或者base64字符串地址
        }
    },
    methods: {
        chooseImg() { // 选择图片-点击事件
            // 目的：为了让input[type=file]标签，让他再用JS代码来触发它的点击事件（导致它默认行为给一个文件选择窗口）
            // 原因：input[type=file]它是原生标签，样式不太好改
            // 解决：移花接木
            this.$refs.iptRef.click()// 模拟 input[type=file] 的点击行为
        },
        onFileChange(e) { // 选择图片确定了
            const files = e.target.files// 拿到用户选择的文件数组
            console.log('用户选择的文件数组：', files[0])
            if (files.length === 0) { // 说明文件选择的窗口打开了，但是它一个文件都没选择就点击了确定关闭了选择弹框

            } else { // 证明选择了文件（默认只能选择一个文件，如果选择多个，需要给input标签加额外原生属性）
                console.log('用户选择的文件数组：', files[0])
                // 目标：选择图片文件，要给到img标签上做纯前端的预览
                // 知识点：img标签的src值
                //  只能是图片的链接地址（外链http://开头，或者图片的相对路径）
                //  或者是图片的base64字符串（而且字符串必须是data：image/png；base64，图片转base64字符串）

                // 解决方案1：文件 -》 内存临时地址（这个地址只能在js里内存里不能发给后台）
                // 语法：URL.createObjectURL(文件)
                // 返回值：内存临时地址
                // this.avatar = URL.createObjectURL(files[0])

                // 解决方案2：将文件转成base64（此字符串可以传给后台）
                // 语法：
                const fr = new FileReader()
                fr.readAsDataURL(files[0])// 传入文件对象开始阅读
                fr.onload = (e) => { // onload等待把文件读成base64字符串后会触发onload事件函数
                    // e.target.result的值就是读完的结果
                    this.$store.state.user.HeadPicture = e.target.result// 赋予给变量，让他显示在img的src里
                }
            }
        }, submit() {
            axios({
                method: 'put',
                url: "http://localhost:8090/user/user/UpUser",
                params: {
                    password: this.password,
                    MobilePhone: this.MobilePhone,
                    sex: this.sex,
                    Career: this.Career,
                    username: this.username,

                }
            }).then(res => {
                if (res.data != null) {
                    console.log(window.localStorage.removeItem('access-admin'));
                    this.$router.push('home')
                    // this.$store.state.user.HeadPicture=
                }
            }).catch(error => {
                console.log(error.response)
            })
        }, load() {
            this.password = this.$store.state.Update.name,
                this.MobilePhone = this.$store.state.Update.name,
                this.sex = '',
                this.Career = '',
                this.address = this.$store.state.Update.address,
                this.username = this.$store.state.Update.name
        }
        // uploadFn() { // 开始上传头像
        //     updateUserAvatarApi({ avatar: this.avatar }).then(res => {
        //         if (res.data.code === 0) {
        //             this.$message.success('更新成功！')
        //             this.$store.dispatch('upUserInfo')// 调用vuex中的方法，进而更新头像
        //         } else {
        //             this.$message.error('更新失败！')
        //         }
        //     })
        // }
    }
}
</script>
<style lang="less" scoped>
.btn-box {
    margin-top: 10px;
}

.preview {
    object-fit: cover;
}

.el-input {
    width: 300px;
    height: 30px;
    margin: 10px 0;
}

.the_img {
    width: 350px;
    height: 350px;
}

.Personal_div {
    margin-left: 200px;
}
</style>